<template>
  <div>
    <!-- 页面头部 黑马优购-->
    <my-cate
      :title="title"
      left-text="返回"
      :right-text="rightText"
      :url="url"
      @onClickLeft="onClickLeft"
      @onClickRight="onClickRight"
    ></my-cate>
    <van-row>
      <!-- 侧边栏 -->
      <van-col :span="6">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item.cat_name"
            v-for="(item , index) in catelist"
            :key="index"
            @click="getCateSon(item.children)"
          />
        </van-sidebar>
      </van-col>
      <van-col :span="18">
        <van-row v-for="(item1,index) in cateSon" :key="index">
          <!-- 顶部标题 -->
          <van-row type="flex" justify="center">
            <strong class="title">/{{item1.cat_name}}/</strong>
          </van-row>
          <!-- 图片分布 -->
          <van-row>
            <van-grid :column-num="3" :icon-size='iconsize' :border="false">
              <van-grid-item
                v-for="item2 in item1.children"
                :key="item2.cat_id"
                :icon="item2.cat_icon"
                :text="item2.cat_name"
                @click="goGoods(item2.cat_name)"
                border="false"
              />
            </van-grid>
          </van-row>
        </van-row>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import narbar from '../../util/navBar'
export default {
  data() {
    return {
      iconsize:'52px',
      title: '黑马优购',
      rightText: '',
      url: '',
      activeKey: 0,
      //分类数据
      catelist: [],
      //一级子数据
      cateSon: []
    }
  },
  created() {
    this.getCate()
  },
  components: {
    'my-cate': narbar
  },
  methods: {
    onClickRight() {},
    onClickLeft() {},
    //获取商品分类数据
    async getCate() {
      const { data: res } = await this.$http.get('/categories')
      if (res.meta.status === 200) {
        console.log('成功')
        // console.log(res.message[0])
        this.catelist = res.message
        this.cateSon = res.message[0].children
      }
    },
    //获取一级子数据
    getCateSon(son) {
      this.cateSon = son
      console.log(son)
    },
    //点击图片跳转详细页面
    goGoods(state) {
      window.sessionStorage.setItem('state', state)

      this.$router.push('/search')
  }
}}
</script>
<style lang="less" scoped>
.title {
  margin: 10px 0;
}
.title {
  font-size: 14px;
}
.van-grid-item__icon {
   font-size: 56px!important;
}
.van-col--6 {
  height: 650px;
  overflow-y: auto;
}
.van-col--18 {
  height: 650px;
  overflow-y: auto;
}
</style>